<template>
  <div class="orderBottom_bg">
    <p class="safe_box">
      <span class="safe_box_img" @click="safeBtn" v-show="showSafe">
        <img src="@/assets/imgs/safe_icon@2x.png" />
      </span>
      <span class="dingwei_img" @click="dingweiBtn">
        <img src="@/assets/imgs/dingwei@2x.png" />
      </span>
    </p>
    <div style="clear:both"></div>
    <!--订单信息-->
    <div class="order_bg">
      <div v-if="orderStatusShow==0">
        <!--待派单-->
        <p class="order_hd_one">
          等待派单
          <span>
            <b>{{orderAmt}}</b>元
            <em @click="chargesDetailsBtn">
              详情
              <md-icon name="wdqb-more" slot="left" class="sanjiao_icon"></md-icon>
            </em>
          </span>
        </p>
        <p class="order_hd_two">
          正在通知附近车辆,请耐心等待司机抢单
          <span>{{incityPayStatus}}</span>
        </p>
        <p class="taix_wait_type">已等待</p>
        <p class="taix_wait_time">{{waitTime}}</p>
        <p class="taix_wait_no">等待{{waitDriverGetDate}}分钟后若无司机接单，将自动关闭订单</p>
        <div class="orderinformation_bottom">
          <ul>
            <li @click="cancelOrderBtn">
              <md-icon name="quxiao_icon" slot="left" class="quxiao_icon"></md-icon>取消订单
            </li>
            <li @click="contactServiceBtn">
              <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
            </li>
            <li @click="incityShareBtn">
              <md-icon name="share_icon" slot="left" class="quxiao_icon"></md-icon>分享行程
            </li>
          </ul>
        </div>
      </div>
      <div v-if="orderStatusShow==1">
        <!--接驾中-->
        <div v-if="incityOrderStatus==2">
          <p class="order_hd_one">
            司机接驾中
            <span>
              <b>{{orderAmt}}</b>元
              <em @click="chargesDetailsBtn">
                详情
                <md-icon name="wdqb-more" slot="left" class="sanjiao_icon"></md-icon>
              </em>
            </span>
          </p>
          <p class="order_hd_two" v-if="driverPopel=='1'">
            若行程有变，您可以在
            <b>{{cancelTime}}前</b>取消
            <span>{{incityPayStatus}}</span>
          </p>
          <p class="order_hd_two" v-else>
            司机正在接送拼友，请遵守系统接送顺序
            <span>{{incityPayStatus}}</span>
          </p>
        </div>
        <!--司机师傅已到达-->
        <div v-if="incityOrderStatus==3">
          <p class="order_hd_one">
            司机师傅已到达
            <span>
              <b>{{orderAmt}}</b>元
              <em @click="chargesDetailsBtn">
                详情
                <md-icon name="wdqb-more" slot="left" class="sanjiao_icon"></md-icon>
              </em>
            </span>
          </p>
          <p class="order_hd_three">
            请在
            <b>{{meetedDate}}前</b>上车，若您迟到
            <span>{{incityPayStatus}}</span>
          </p>
          <p class="order_hd_two">司机可能取消订单，影响您的出行。</p>
        </div>
        <!--行程中-->
        <div v-if="incityOrderStatus==4">
          <p class="order_hd_one">
            行程中
            <span>
              <b>{{orderAmt}}</b>元
              <em @click="chargesDetailsBtn">
                详情
                <md-icon name="wdqb-more" slot="left" class="sanjiao_icon"></md-icon>
              </em>
            </span>
          </p>
          <p class="order_hd_two">
            {{orderStatusText}}
            <span>{{incityPayStatus}}</span>
          </p>
        </div>
        <!--同行乘客-->
        <div v-if="ordersSameType">
          <div class="Colleague_per" v-if="sameUsers">
            <p>
              <img src="@/assets/imgs/touxiang_icon.png" />
              <span>找到拼友,可点击查看</span>
              <b @click="orderPlanBtn">行程规划</b>
            </p>
          </div>
          <div v-else class="colleague_no">
            <p>
              <img src="@/assets/imgs/chixuxunzhao_icon.png" class="Rotation" />持续为您寻找拼友
            </p>
          </div>
          <div style="clear:both"></div>
        </div>
        <!--司机信息-->
        <div class="driver_box">
          <div class="driver_photo">
            <p>
              <img :src="driver_photoImg" />
            </p>
          </div>
          <div class="driver_car">
            <p>
              <span class="car-number">{{getIncityOrderDate?getIncityOrderDate.carPateNumber:''}}</span>
              <span class="car-brand">{{getIncityOrderDate?getIncityOrderDate.driverCarType:''}}</span>
            </p>
            <p>
              <span class="driver-name">{{getIncityOrderDate?getIncityOrderDate.driverName:''}}</span>
              <span class="stars">
                <i class="active"></i>
              </span>
              <span class="dirver-score">{{getIncityOrderDate?getIncityOrderDate.driverLevel:''}}</span>
            </p>
          </div>
          <div class="driver_phone">
            <!-- <span>
                            <img src="@/assets/imgs/snyc_jjz_tel.png">
            </span>-->
            <span @click="callDriverPhone">
              <img src="@/assets/imgs/phone_ico.png" />
            </span>
          </div>
          <div style="clear:both"></div>
        </div>
        <div class="orderinformation_bottom">
          <ul>
            <li v-if="showCanel" @click="cancelOrderBtn">
              <md-icon name="quxiao_icon" slot="left" class="quxiao_icon"></md-icon>取消订单
            </li>
            <li @click="contactServiceBtn">
              <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
            </li>
            <li @click="incityShareBtn">
              <md-icon name="share_icon" slot="left" class="quxiao_icon"></md-icon>分享行程
            </li>
          </ul>
        </div>
      </div>
      <!--取消订单-->
      <div v-if="orderStatusShow==2">
        <div>
          <p class="order_hd_one">
            行程取消
            <span>
              <b>{{orderAmt}}</b>元
              <em @click="chargesDetailsBtn">
                详情
                <md-icon name="wdqb-more" slot="left" class="sanjiao_icon"></md-icon>
              </em>
            </span>
          </p>
          <p class="order_hd_two" v-show="duty==0">
            乘客取消，无责
            <span>{{incityPayStatus}}</span>
          </p>
          <div v-show="duty==1">
            <p class="order_hd_two" v-show="canclerType==0">
              司机取消，无责
              <span>{{incityPayStatus}}</span>
            </p>
            <p class="order_hd_two" v-show="canclerType==1">
              乘客取消，无责
              <span>{{incityPayStatus}}</span>
            </p>
          </div>
          <div v-show="duty==2">
            <p class="order_hd_two" v-show="canclerType==1">
              乘客取消，有责
              <span>{{incityPayStatus}}</span>
            </p>
            <p class="order_hd_two" v-show="canclerType==0">
              司机取消，有责
              <span>{{incityPayStatus}}</span>
            </p>
          </div>
        </div>
        <p class="taxi_order_close_img">
          <img src="@/assets/imgs/tishi@2x.png" />
        </p>
        <div v-show="duty==0">
          <p class="taxi_order_close_hd">订单取消无责</p>
          <p class="taxi_order_close_text">您已取消行程</p>
        </div>
        <div v-show="duty==1">
          <div v-show="canclerType==0">
            <p class="taxi_order_close_hd">订单取消无责</p>
            <p class="taxi_order_close_text">司机已取消行程</p>
          </div>
          <div v-show="canclerType==1">
            <p class="taxi_order_close_hd">订单取消无责</p>
            <p class="taxi_order_close_text">您已取消行程</p>
          </div>
        </div>
        <div v-show="duty==2">
          <div v-show="canclerType==1">
            <p class="taxi_order_close_hd">订单取消有责</p>
            <p class="taxi_order_close_text">
              您已取消行程，本次取消您本周的有责取消机会
              <span>-1</span>
            </p>
          </div>
          <div v-show="canclerType==0">
            <p class="taxi_order_close_hd">订单取消有责</p>
            <p class="taxi_order_close_text">
              司机已取消行程，本次取消因你没按约定时间 在上车点上车，您本周有责取消机会
              <span>-1</span>
            </p>
          </div>
        </div>
        <p class="quxiao_canle" @click="cancelRuleBtn">取消规则</p>
      </div>
      <!--订单关闭-->
      <div v-if="orderStatusShow==3">
        <div>
          <p class="order_hd_one">
            订单已取消
            <span>
              <b>{{orderAmt}}</b>元
              <em @click="chargesDetailsBtn">
                详情
                <md-icon name="wdqb-more" slot="left" class="sanjiao_icon"></md-icon>
              </em>
            </span>
          </p>
          <p class="order_hd_two">
            订单已关闭
            <span>{{incityPayStatus}}</span>
          </p>
        </div>
        <p class="taxi_order_close_img">
          <img src="@/assets/imgs/tishi@2x.png" />
        </p>
        <p class="taxi_order_close_hd">订单已关闭</p>
        <p class="taxi_order_close_text">系统自动关闭</p>
        <p class="quxiao_canle" @click="cancelRuleBtn">取消规则</p>
      </div>
    </div>
    <!--已完成-->
    <div v-if="orderStatusShow==4">
      <div class="order_bg">
        <p class="order_hd_one" style="font-size:30px;">
          {{getIncityOrderDate?getIncityOrderDate.carPateNumber:''}} {{getIncityOrderDate?getIncityOrderDate.driverCarType:''}}
          <span>
            <b>{{orderAmt}}</b>元
            <em @click="chargesDetailsBtn">
              详情
              <md-icon name="wdqb-more" slot="left" class="sanjiao_icon"></md-icon>
            </em>
          </span>
        </p>
        <p class="finish_hd">
          <span class="driver-name">{{getIncityOrderDate?getIncityOrderDate.driverName:''}}</span>
          <span class="stars">
            <i class="active"></i>
          </span>
          <!-- <span class="stars">
                        <i :class="{'active':starsone}"></i>
                        <i :class="{'active':starstwo}"></i>
                        <i :class="{'active':starsthree}"></i>
                        <i :class="{'active':starsfour}"></i>
                        <i :class="{'active':starsfive}"></i>
          </span>-->
          <span class="dirver-score">{{getIncityOrderDate?getIncityOrderDate.driverLevel:''}}</span>
          <span class="finish_paystatus">{{incityPayStatus}}</span>
        </p>
        <div class="orderinformation_bottom">
          <ul>
            <li @click="contactServiceBtn">
              <md-icon name="kefu_icon" slot="left" class="quxiao_icon"></md-icon>联系客服
            </li>
            <li @click="incityShareBtn">
              <md-icon name="share_icon" slot="left" class="quxiao_icon"></md-icon>分享行程
            </li>
          </ul>
        </div>
      </div>
      <div class="evaluate_box">
        <div v-if="evaluateStatus=='0'">
          <!--未评价-->
          <p class="evaluate_box_hd">
            您的评价让我们做的更好
            <span>匿名</span>
          </p>
          <div class="starWrap">
            <img :src="level>index?stara:starb" v-for="(item,index) in levelList" :key="index" @click="goEvaluate" />
          </div>
        </div>
        <div v-if="evaluateStatus=='1'">
          <!--已评价-->
          <p class="evaluate_box_hd">
            {{getIncityOrderDate?getIncityOrderDate.evaluateLevelText:''}}
            <span>匿名</span>
          </p>
          <div class="starWrap">
            <img :src="level>index?stara:starb" v-for="(item,index) in levelList" :key="index" />
            <p class="evaluate_dea" @click="seeEvaluteBtn">
              评价详情
              <md-icon name="wdqb-more" slot="left" class="sanjiao_icon"></md-icon>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import '@/assets/svgs/shangchedian.svg';
import '@/assets/svgs/xiachedian.svg';
import '@/assets/svgs/wdqb-more.svg';
import '@/assets/svgs/share_icon.svg';
import '@/assets/svgs/kefu_icon.svg';
import '@/assets/svgs/quxiao_icon.svg';
import { Field, FieldItem, Icon, Toast, InputItem, Dialog } from 'mand-mobile';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import { mapGetters, mapActions, mapMutations } from 'vuex';
import http from '@/common/http';
import Popup from '../popup';
import Config from '@/common/config';
import Loading from '@/components/loading';
var moment = require('moment');
moment.locale('zh-cn');
export default {
  name: 'order-bottom',
  components: {
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Icon.name]: Icon,
    [Toast.name]: Toast,
    [InputItem.name]: InputItem
  },
  props: {
    orderStatusShow: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      driverPopel: '1', // 司机目前接谁 0 接拼友 1接自己
      ordersSameType: false,
      sameUsers: false,
      driver_photoImg: require('@/assets/imgs/snyc_tx.png'), // 司机头像
      starsone: false,
      starstwo: false,
      starsthree: false,
      starsfour: false,
      starsfive: false,
      showCanel: true, // 是否显示取消按钮
      duty: '0', // 是否有责 0 无责 1 司机有责 2 乘客有责
      canclerType: '',
      waitTime: '',
      incityOrderTimer: null,
      incityPayStatus: '',
      level: '0',
      levelList: [0, 1, 2, 3, 4],
      stara: require('@/assets/imgs/xcxq_icon_xing_light@2x.png'), // 亮星星
      starb: require('@/assets/imgs/xcxq_icon_xing_dark@2x.png'), // 暗星星
      evaluateStatus: '', // 评价状态
      showSafe: false,
      orderStatusText: '行程已开始，请系好安全带，祝您旅途愉快！'
    };
  },
  created() {},
  beforeDestroy() {
    clearInterval(this.incityOrderTimer);
    this.incityOrderTimer = null;
  },
  methods: {
    orderInit() {
      if (this.getIncityOrderDate.orderStatus === '1') {
        this.incityOrderTimer = setInterval(() => {
          let time = (new Date().getTime() - parseInt(this.getIncityOrderDate.payDate)) / 1000;
          let minutes =
            Math.floor(time / 60) > 9 ? Math.floor(time / 60) : '0' + Math.floor(time / 60);
          let seconds =
            Math.floor(time % 60) > 9 ? Math.floor(time % 60) : '0' + Math.floor(time % 60);
          this.waitTime = minutes + ':' + seconds;
          // if (time < parseInt(this.getIncityOrderDate.waitDriverGetDate) * 60 + parseInt(60)) {
          //     let minutes = Math.floor(time / 60) > 9 ? Math.floor(time / 60) : '0' + Math.floor(time / 60);
          //     let seconds = Math.floor(time % 60) > 9 ? Math.floor(time % 60) : '0' + Math.floor(time % 60);
          //     this.waitTime = minutes + ':' + seconds;
          // } else {
          //     clearInterval(this.incityOrderTimer);
          //     this.waitTime = this.getIncityOrderDate.waitDriverGetDate + ':00';
          //     this.$store.commit('resetIncity');
          //     this.$router.push({
          //         name: 'homeIncity'
          //     });
          // }
        }, 1000);
      } else if (this.getIncityOrderDate.orderStatus === '2') {
        clearInterval(this.incityOrderTimer);
        this.showSafe = true;
      } else if (this.getIncityOrderDate.orderStatus === '3') {
        clearInterval(this.incityOrderTimer);
        this.showSafe = true;
      } else if (this.getIncityOrderDate.orderStatus === '4') {
        clearInterval(this.incityOrderTimer);
        this.showCanel = false;
        this.showSafe = true;
      } else if (this.getIncityOrderDate.orderStatus === '5') {
        clearInterval(this.incityOrderTimer);
        this.showSafe = true;
      } else if (this.getIncityOrderDate.orderStatus === '6') {
        clearInterval(this.incityOrderTimer);
        if (this.getIncityOrderDate.driverId) {
          this.showSafe = true;
        } else {
          this.showSafe = false;
        }
      } else if (this.getIncityOrderDate.orderStatus === '7') {
        clearInterval(this.incityOrderTimer);
        this.showSafe = false;
      }
      // 支付状态
      if (this.getIncityOrderDate.payStatus === '1') {
        this.incityPayStatus = '已支付';
      } else if (this.getIncityOrderDate.payStatus === '2') {
        this.incityPayStatus = '已退款';
      } else if (this.getIncityOrderDate.payStatus === '0') {
        this.incityPayStatus = '未支付';
      }
      // 评价状态
      this.evaluateStatus = this.getIncityOrderDate.evaluateStatus;
      // 评价星级的回显
      this.level = this.getIncityOrderDate.evaluateLevel;
      console.log(this.getIncityOrderDate.driverPhoto);
      this.driver_photoImg =
        Config.ossImgUrl + this.getIncityOrderDate.driverPhoto
          ? Config.ossImgUrl + this.getIncityOrderDate.driverPhoto
          : require('@/assets/imgs/snyc_tx.png'); // 司机头像
      // 判断取消订单是否有责
      this.duty = this.getIncityOrderDate.duty;
      this.canclerType = this.getIncityOrderDate.canclerType;
      // 订单类型 1是拼车 2是专车
      if (this.getIncityOrderDate.type === '1') {
        this.ordersSameType = true;
      } else {
        this.ordersSameType = false;
      }
      // 判断是否有同行乘客
      if (this.getIncityOrderDate.isHaveOther === '1') {
        this.sameUsers = true;
      } else {
        this.sameUsers = false;
      }
      // 判断司机状态
      if (this.getIncityOrderDate.driverStatus === '1') {
        this.orderStatusText = '行程已开始，请系好安全带，祝您旅途愉快！';
        this.driverPopel = '1';
      } else {
        this.driverPopel = '0';
        this.orderStatusText = '行程已开始，请系好安全带，祝您旅途愉快！';
        // this.orderStatusText = '司机正在接送拼友，请遵守系统接送顺序';
      }
      // 点亮司机评分星星
      var driverLevel = parseInt(this.getIncityOrderDate.driverLevel);
      if (driverLevel === 1) {
        this.starsone = true;
      } else if (driverLevel === 2) {
        this.starsone = true;
        this.starstwo = true;
      } else if (driverLevel === 3) {
        this.starsone = true;
        this.starstwo = true;
        this.starsthree = true;
      } else if (driverLevel === 4) {
        this.starsone = true;
        this.starstwo = true;
        this.starsthree = true;
        this.starsfour = true;
      } else if (driverLevel === 5) {
        this.starsone = true;
        this.starstwo = true;
        this.starsthree = true;
        this.starsfour = true;
        this.starsfive = true;
      }
    },
    // 安全中心
    safeBtn() {
      window.location.href = '/incity/incitysafe?orderno=' + this.$route.query.orderno;
      // this.$router.push({
      //     name: 'Incitysafe',
      //     query: {
      //         orderno: this.$route.query.orderno
      //     }
      // });
    },
    // 获取当前位置定位
    dingweiBtn() {
      this.$emit('dingweiBtn');
    },
    // 分享行程
    incityShareBtn() {
      this.$emit('incityShareBtn');
    },
    // 取消订单
    cancelOrderBtn() {
      // 判定取消责任
      let params = {
        orderNo: this.$route.query.orderno
      };
      Loading.show();
      http.post('/pakj/city/getCancleDuty', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          console.log(res.data);
          Dialog.confirm({
            title: '取消订单',
            content: res.data.data.tips,
            confirmText: res.data.data.btn1,
            cancelText: res.data.data.btn2,
            onConfirm: () => {
              this.cancelOrder(res.data.data.duty);
              this.$emit('orderCancel');
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    cancelOrder(duty) {
      let params = {
        orderNo: this.$route.query.orderno,
        duty: duty
      };
      http.post('/pakj/city/cancleOrder', params).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.$store.commit('resetIncity');
          this.$router.push({
            name: 'IncityOrderCancel',
            query: {
              orderno: this.$route.query.orderno
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 乘客取消规则
    cancelRuleBtn() {
      this.$router.push({
        name: 'IncityCancelRule'
      });
    },
    // 联系司机
    callDriverPhone() {
      Dialog.confirm({
        title: '联系司机',
        content: '请拔打司机电话' + decryptByDESModeEBC(this.getIncityOrderDate.driverPhone),
        confirmText: '是',
        cancelText: '否',
        onConfirm: () => {
          window.location.href =
            'tel://' + decryptByDESModeEBC(this.getIncityOrderDate.driverPhone);
        }
      });
    },
    //  联系客服
    contactServiceBtn() {
      Dialog.confirm({
        title: '联系客服',
        content: '请拔打客服电话' + this.getIncityOrderDate.servicePhone,
        confirmText: '是',
        cancelText: '否',
        onConfirm: () => {
          window.location.href = 'tel://' + this.getIncityOrderDate.servicePhone;
        }
      });
    },
    // 费用详情
    chargesDetailsBtn() {
      this.$router.push({
        name: 'IncityChargesDetails',
        query: {
          orderno: this.getIncityOrderDate.orderNo,
          couponId: this.getIncityOrderDate.couponId
        }
      });
    },
    // 拉起评价
    goEvaluate() {
      Popup.createIncityEvaluateSelector().then(data => {
        this.$emit('evaluated');
      });
    },
    // 查看评价
    seeEvaluteBtn() {
      Popup.createIncityEvaluateSeeSelector().then(data => {});
    },
    // 查看我的行程
    orderPlanBtn() {
      Popup.createIncityTripSelector().then(data => {});
    },
    // 处理金额
    orderAmtFormat(number) {
      if (number.indexOf('.') === -1) {
        return number + '.00';
      } else {
        return number;
      }
    }
  },
  computed: {
    ...mapGetters(['getIncityOrderDate', 'incityOrderStatus']),
    cancelTime() {
      var str = this.getIncityOrderDate;
      if (!str) {
        return '';
      }
      let dispatchdate = moment(this.getIncityOrderDate.cancleAutoDate, 'x'); // 无责取消时间
      let startMoment = dispatchdate.calendar(null, {
        sameDay: '[今天] HH:mm',
        nextDay: '[明天] HH:mm',
        nextWeek: 'MMMDo HH:mm',
        lastDay: '[昨天] HH:mm',
        lastWeek: 'MMMDo HH:mm',
        sameElse: 'MMMDo HH:mm'
      });
      return startMoment;
    },
    meetedDate() {
      var str = this.getIncityOrderDate;
      if (!str) {
        return '';
      }
      let dispatchdate = moment(this.getIncityOrderDate.waitUserToDate, 'x');
      let date = dispatchdate.calendar(null, {
        sameDay: '[今天] HH:mm',
        nextDay: '[明天] HH:mm',
        nextWeek: 'MMMDo HH:mm',
        lastDay: '[昨天] HH:mm',
        lastWeek: 'MMMDo HH:mm',
        sameElse: 'MMMDo HH:mm'
      });
      return date;
    },
    // 获取订单金额
    orderAmt() {
      var str = this.getIncityOrderDate;
      if (!str) {
        return '';
      }
      return this.orderAmtFormat(decryptByDESModeEBC(this.getIncityOrderDate.lastOrderAmt));
    },
    // 获取等待时间
    waitDriverGetDate() {
      var str = this.getIncityOrderDate;
      if (!str) {
        return '';
      }
      return this.getIncityOrderDate.waitDriverGetDate;
    }
  }
};
</script>
<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

h6, h5 {
  display: block;
  font-size: 22px;
  margin-block-start: 0em;
  margin-block-end: 0em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  font-weight: 400;
}

.orderBottom_bg {
  position: absolute;
  bottom: 20px;
  z-index: 501;
  width: 100%;
}

.order_bg {
  background-color: #fff;
  border-radius: 10px;
  margin: 0px 20px;
}

.evaluate_box {
  background-color: #fff;
  border-radius: 10px;
  margin: 10px 20px 0px 20px;
}

.evaluate_box_hd {
  padding: 20px 30px 0px 30px;
  font-size: 30px;
  color: #333;
}

.evaluate_box_hd span {
  margin-left: 20px;
}

.evaluate_dea {
  margin-top: 10px;
}

.safe_box {
  margin: 10px 20px;
}

.dingwei_img {
  float: right;
}

.safe_box_img {
  text-align: left;
}

.safe_box img {
  width: 56px;
  height: 56px;
}

.order_hd_one {
  padding: 30px 30px 0px 30px;
  font-size: 36px;
  color: #333;
}

.order_hd_one span {
  float: right;
  font-size: 24px;
}

.order_hd_one span b {
  font-weight: 400;
  font-size: 36px;
}

.order_hd_one span em {
  font-size: 22px;
  color: #999;
  font-style: normal;
  margin-left: 10px;
}

.order_hd_two {
  padding: 10px 30px 20px 30px;
  font-size: 20px;
  color: #666;
  border-bottom: solid 1px #E0E0E0;
}

.order_hd_two b {
  font-weight: 400;
  color: #FF6917;
}

.order_hd_three {
  padding: 10px 30px 0px 30px;
  font-size: 20px;
  color: #666;
}

.order_hd_three b {
  font-weight: 400;
  color: #FF6917;
}

.order_hd_two span, .order_hd_three span {
  float: right;
  margin-right: 10px;
}

.sanjiao_icon {
  width: 24px;
  height: 24px;
  position: relative;
  top: 3px;
}

.taix_wait_type {
  text-align: center;
  font-size: 24px;
  color: #999;
  margin-top: 20px;
}

.taix_wait_time {
  text-align: center;
  font-size: 40px;
  color: #333;
  margin: 20px 0px;
}

.taix_wait_no {
  text-align: center;
  font-size: 20px;
  color: #999;
  margin-bottom: 20px;
}

.orderinformation_bottom {
  padding: 0px 30px;
  border-top: solid 1px #E0E0E0;
}

.orderinformation_bottom ul {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: center;
}

.orderinformation_bottom ul li {
  margin-top: 30px;
  font-size: 24px;
  color: #666;
  padding-bottom: 30px;
}

.quxiao_icon {
  width: 24px;
  height: 24px;
  position: relative;
  top: 3px;
  margin-right: 8px;
}

.Colleague_per {
  padding: 0px 30px;
}

.Colleague_per p {
  height: 78px;
  line-height: 78px;
}

.Colleague_per p img {
  height: 48px;
  width: 48px;
  border-radius: 50%;
  position: relative;
  top: 13px;
}

.Colleague_per p span {
  font-size: 24px;
  color: #666666;
  margin-left: 10px;
}

.Colleague_per p b {
  font-weight: 400;
  font-size: 24px;
  color: #FF6917;
  margin-left: 10px;
}

.colleague_no {
  padding: 0px 30px;
}

.colleague_no p {
  height: 80px;
  line-height: 80px;
  font-size: 24px;
  color: #666;
}

.colleague_no p img {
  width: 24px;
  height: 24px;
  position: relative;
  top: 4px;
  right: 8px;
}

@keyframes rotation {
  from {
    -webkit-transform: rotate(0deg);
  }

  to {
    -webkit-transform: rotate(360deg);
  }
}

.Rotation {
  -webkit-transform: rotate(360deg);
  animation: rotation 3s linear infinite;
  -moz-animation: rotation 3s linear infinite;
  -webkit-animation: rotation 3s linear infinite;
  -o-animation: rotation 3s linear infinite;
}

.driver_box {
  padding: 20px 30px;
  border-top: solid 1px #E0E0E0;
}

.driver_photo {
  float: left;
}

.driver_photo p img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
}

.driver_car {
  float: left;
}

.driver_car p {
  margin-top: 10px;
  margin-left: 24px;
}

.driver-name {
  font-size: 24px;
  color: #999;
}

.stars {
  margin-left: 16px;
}

.stars i {
  display: inline-block;
  width: 24px;
  height: 22px;
  background: url('../../../assets/imgs/xcxq_icon_xing_dark@2x.png') no-repeat center center;
  background-size: 24px 22px;
}

.stars i.active {
  background-image: url('../../../assets/imgs/xcxq_icon_xing_light@2x.png');
}

.dirver-score {
  font-size: 24px;
  color: #999;
  margin-left: 16px;
}

.car-number {
  font-size: 30px;
  color: #333;
}

.car-brand {
  font-size: 30px;
  color: #333;
  margin-left: 16px;
}

.driver_phone {
  float: right;
  margin-top: 28px;
}

.driver_phone span {
  margin-left: 10px;
}

.driver_phone span img {
  width: 44px;
  height: 44px;
}

.taxi_order_close_img {
  text-align: center;
  padding-top: 20px;
}

.taxi_order_close_img img {
  width: 80px;
  height: 80px;
}

.taxi_order_close_hd {
  font-size: 36px;
  color: #333;
  text-align: center;
  padding-top: 20px;
}

.taxi_order_close_text {
  font-size: 20px;
  color: #999;
  text-align: center;
  padding-top: 20px;
  padding-bottom: 30px;
}

.quxiao_canle {
  font-size: 28px;
  color: #666;
  text-align: center;
  padding-bottom: 30px;
}

.finish_hd {
  margin: 10px 30px;
  padding-bottom: 20px;
}

.finish_paystatus {
  float: right;
  font-size: 26px;
  color: #666;
  margin-right: 30px;
}

.starWrap {
  width: 100%;
  text-align: center;
  margin-top: 20px;
  padding-bottom: 20px;
}

.starWrap img {
  width: 40px;
  height: 40px;
  margin-left: 30px;
}
</style>